<template>
  <div
    class="ky-container schedule-container"
    :style="{height: qktVisible?'calc(100vh - 250px)': 'calc(100vh - 50px)'}"
    @click="scheduleDlgClose"
  >
    <el-card shadow="hover" class="relative ky-card-xs ky-card-hdbg">
      <el-row>
        <el-col :span="24">
          <el-form
            :model="formdata"
            @submit.native.prevent
            class="ky-form-inline ky-form-inline-sm">
            <el-form-item>
              <roomCascader :room.sync="formdata.room" :refresh-local="true" @roomChange="roomChange"></roomCascader>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div class="r_tools" style="text-align: right;line-height: 46px;">
        <span v-if="formdata.room.length>0" class="mr4">
          <el-tooltip class="item" effect="dark" content="刷新" placement="top-start">
            <i @click="refreshTemplate" class="el-icon-refresh" style="margin-top: 12px;cursor:pointer;"></i>
          </el-tooltip>
        </span>
        <el-button v-show="!toolsflag" size="small" v-permission="'YJYY10002031001'" @click="viewChange">机房号源管理</el-button>
        <autoPublishStatus :mini="toolsflag" ref="autoPublishStatus" @autoChange="refreshTemplate" style="margin: 0 5px;"></autoPublishStatus>
        <i
          style="margin-right: 4px;"
          :class="!toolsflag ? 'el-icon-d-arrow-right' : 'el-icon-c-scale-to-original'"
          @click="toolsflag = !toolsflag"
        ></i>
      </div>
    </el-card>
    <el-card shadow="hover" class="ky-card-xs ky-card-hdbg ky-mt10" v-show="formdata.room.length>0">
      <tempView ref="tempView"></tempView>
    </el-card>
    <roomNone v-show="formdata.room.length===0"></roomNone>
    <quicktemplate
      v-permission="'YJYY10002031001'"
      ref="quicktemplate"
      :qt-show.sync="qktVisible"
      :checked-room="formdata.room"
      @quickTempChange="quickTempChange"
    ></quicktemplate>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import roomNone from '@/components/roomNone'
import quicktemplate from '../components/quickTemplate'
import roomCascader from '../components/roomCascader'
import autoPublishStatus from '../components/autoPublishStatus'
import tempView from './tempView'
export default {
  components: { roomCascader, tempView, quicktemplate, autoPublishStatus, roomNone },
  provide() {
    return {
      tempListUpdate: this.tempListUpdate
    }
  },
  data() {
    return {
      toolsflag: false,
      checkRoomZZ: [],
      formdata: {
        room: []
      },

      checkroomModelObj: {
        id: 0, // 排班模板id
        isAutoPublish: 0, // 是否自动发布
        publishWeeks: 0, // 自动发布几周
        isIncludedHolidays: false // 是否包含节假日
      },

      // 快捷选择模板
      quickTempObj: null,
      qktVisible: false
    }
  },
  computed: {
    ...mapGetters(['device'])
  },
  watch: {
    device: {
      handler(val) {
        this.toolsflag = val === 'mobile'
      },
      immediate: true
    }
  },
  created() {
    // this.formdata.room = this.$store.state.user.checkRoom
    console.log('device', this.$store.state.app.device)
  },
  mounted() {
    // this.roomChange(this.formdata.room)
    // this.$refs.quicktemplate.checkRoomInit(this.formdata.room)
  },
  methods: {
    // 机房改变
    roomChange(roomData) {
      console.log('roomChange=>', roomData)
      this.formdata.room = [...roomData]
      if (roomData) {
        this.$refs.autoPublishStatus.init(roomData)
      }
      this.qktVisible = false
      this.$refs.tempView.init(this.formdata.room)
      this.$store.dispatch('user/getDefaultCheckRoom', roomData)
    },
    viewChange() {
      this.$router.push({ path: '/schedule/manage' })
    },
    // 刷新
    refreshTemplate() {
      this.$refs.tempView.refresh()
    },
    // 快捷模板选择监听
    quickTempChange(quickTempObj) {
      this.quickTempObj = quickTempObj ? { ...quickTempObj } : null

      this.$refs.tempView.quickTempChange(this.quickTempObj)
    },
    tempListUpdate() {
      this.$refs.quicktemplate && this.$refs.quicktemplate.getTempList()
    },
    // 关闭弹框
    scheduleDlgClose() {
      this.$refs.tempView && this.$refs.tempView.dlgClose()
    }
  }
}
</script>

<style lang="scss" scoped>
.schedule-container{
  height: calc(100vh - 50px);
  overflow-y: auto;
}
.releaseauto{
  margin:0 20px;
  cursor: pointer;
  font-size: 14px;
  .dot{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    background-color: #EB5353;
  }
  .isauto{
    background-color: rgb(67, 207, 32);
  }
}
.r_tools{
  position: absolute;
  right: 0;
  top: 0;
  padding: 3px;
  background-color: #fff;
  border-radius: 4px;
}
</style>
